<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lmlq Mill</title>
    <link rel="stylesheet" href="./css/muse-ui.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/publiic.css">
    <link rel="stylesheet" href="./css/case.css">
</head>

<body id="index">
    <div id="app">
        <!-- 头部 -->
        <header>
            <div class="head-nav">
                <mu-row>
                    <mu-col span="2" class="logo">
                        <div class="grid-cell">
                            <a href="index.html" target="index">
                                <img src="./img/left.png" alt="logo">
                            </a>
                        </div>
                    </mu-col>
                    <mu-col span="8" class="page-nav">
                        <div class="nav-title">
                            <span>Home > <strong>Case</strong></span>
                        </div>
                    </mu-col>
                    <mu-col span="2" class="index-menu">
                        <div class="grid-cell">
                            <mu-menu cover placement="left" :open.sync="open">
                                <mu-button icon>
                                    <img src="./img/list_icon2.png" alt="">
                                </mu-button>
                                <mu-list slot="content">
                                    <mu-list-item button href="index.html">
                                        <mu-list-item-title>Home</mu-list-item-title>
                                    </mu-list-item>
                                    <mu-list-item button href="products_l.html">
                                        <mu-list-item-title>Products</mu-list-item-title>
                                    </mu-list-item>
                                    <mu-list-item button href="case_l.html">
                                        <mu-list-item-title>Case</mu-list-item-title>
                                    </mu-list-item>
                                    <mu-list-item button href="news_l.html">
                                        <mu-list-item-title>News</mu-list-item-title>
                                    </mu-list-item>
                                    <mu-list-item button href="about.html">
                                        <mu-list-item-title>About</mu-list-item-title>
                                    </mu-list-item>
                                    <mu-list-item button href="contact.html">
                                        <mu-list-item-title>Contact us</mu-list-item-title>
                                    </mu-list-item>
                                </mu-list>
                            </mu-menu>
                        </div>
                    </mu-col>
                </mu-row>
            </div>
        </header>
        <!-- banner -->
        <div class="case-banner">
            <div class="case-card">
                <a href="./case_detail.html">
                    <p class="case-img">
                        <img src="./img/case01.jpg">
                    </p>
                    <div class="case-detile">
                        <h3>Kefid 200 mesh Bituminous coal grinding mill production line in Lanzhou, China</h3>
                    </div>
                </a>
            </div>
            <div class="case-info">
                <p><img src="./img/iconfontac.png"><strong>Material:</strong> Bituminous coal</p>
                <p><img src="./img/iconfontac.png"><strong>Caption:</strong> 45-48T/H</p>
                <p><img src="./img/iconfontac.png"><strong>Equipment:</strong> VM220M Vertical Grinding Mill</p>
                <div class="case-btn">
                    <a href="#"><span>Chat Online</span></a>
                </div>
            </div>
        </div>
        <!-- 内容 -->
        <article>
            <!-- 案例文章 -->
            <div class="content">
                <div class="label-box">
                    <mu-row>
                        <mu-col span=6 class="label">
                            <label class="l-title">
                                Process Description
                            </label>
                        </mu-col>
                        <mu-col span=6 class="label">
                            <label class="l-title">
                                Customer Reviews
                            </label>
                        </mu-col>
                    </mu-row>
                </div>
                <div class="content-box">
                    <span class="dec-bar"></span>
                    <h2><img src="./img/label_icon.jpg">Process Description</h2>
                    <p>The production line adopts two-step coal powder preparation process, which has high efficiency
                        and stable operation. After being put into production, the equipment is in good use, the
                        fineness of the powder reaches the standard, and the output of D90 powder with 200 meshes can
                        reach 45-48T/H, which greatly exceeds the expectations of</p>
                    <h2><img src="./img/label_icon.jpg">Customer Reviews</h2>
                    <p>Based on rich grinding experience, customer have a deep understanding of the equipment. After
                        comparing the used mills, the VM vertical mill with kefid has obvious advantages, and the
                        quality of the pulverized coal processed is relatively high.</p>
                </div>
            </div>
            <!-- 产品推荐 -->
            <div class="product-r">
                <h2 class="r-title"><img src="./img/star_r.png">Related Equipment</h2>
                <div class="list-box products">
                    <mu-row>
                        <mu-col span="6">
                            <div class="grid-cell pro-card hotsale_pro">
                                <a href="product_d.html">
                                    <div class="pro-img-box">
                                        <img class="pro-img" src="./img/LM.jpg">
                                    </div>
                                    <div class="pro-title">
                                        <h4>LM Vertical Millr</h4>
                                        <p><strong>Input Size:</strong> ≤15 - ≤30mm</p>
                                    </div>
                                </a>
                            </div>
                        </mu-col>
                        <mu-col span="6">
                            <div class="grid-cell pro-card hotsale_pro">
                                <a href="product_d.html">
                                    <div class="pro-img-box">
                                        <img class="pro-img" src="./img/MTW-Z.jpg">
                                    </div>
                                    <div class="pro-title">
                                        <h4>LM Vertical Millr</h4>
                                        <p><strong>Input Size:</strong> ≤15 - ≤30mm</p>
                                    </div>
                                </a>
                            </div>
                        </mu-col>
                        <mu-col span="6">
                            <div class="grid-cell pro-card hotsale_pro">
                                <a href="product_d.html">
                                    <div class="pro-img-box">
                                        <img class="pro-img" src="./img/MW.jpg">
                                    </div>
                                    <div class="pro-title">
                                        <h4>LM Vertical Millr</h4>
                                        <p><strong>Input Size:</strong> ≤15 - ≤30mm</p>
                                    </div>
                                </a>
                            </div>
                        </mu-col>
                        <mu-col span="6">
                            <div class="grid-cell pro-card hotsale_pro">
                                <a href="product_d.html">
                                    <div class="pro-img-box">
                                        <img class="pro-img" src="./img/MTW.jpg">
                                    </div>
                                    <div class="pro-title">
                                        <h4>LM Vertical Millr</h4>
                                        <p><strong>Input Size:</strong> ≤15 - ≤30mm</p>
                                    </div>
                                </a>
                            </div>
                        </mu-col>
                    </mu-row>
                </div>
            </div>
        </article>
        <!-- 底部 -->
        <footer>
            <!-- 联系我们 -->
            <div class="form-box">
                <div class="form-banner">
                    <img src="./img/form_banner.png" alt="">
                </div>
                <div class="form-inquery">
                    <mu-form id="msgForm" ref="form" :model="validateForm" class="mu-demo-form">
                        <mu-form-item :rules="nameRules" prop="name">
                            <mu-text-field v-model="validateForm.name" placeholder="Full Name" class="input1">
                            </mu-text-field><br />
                        </mu-form-item>
                        <mu-form-item :rules="telRules" prop="number">
                            <mu-text-field v-model="validateForm.number" type="number" placeholder="Call Number"
                                class="input2"></mu-text-field><br />
                        </mu-form-item>
                        <mu-form-item :rules="messageRules" prop="message" class="messa">
                            <mu-text-field v-model="validateForm.message" multi-line :rows="4"
                                placeholder="If you would like to share more information about your project, such as application field, product size, equipment purchase time…，please leave message here."
                                class="input3"></mu-text-field><br />
                        </mu-form-item>
                        <mu-form-item>
                            <mu-button @click="submit">ORDER NOW</mu-button>
                        </mu-form-item>
                    </mu-form>
                </div>
            </div>

            <div class="foot-chat">
                <a class="chat-link" href="#">
                    <img src="./img/chat_icon.png">
                    <span>Chat Online</span>
                </a>
            </div>
        </footer>
    </div>
</body>
<script src="./js/vue.min.js"></script>
<script src="./js/muse-ui.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                open: false,
                active3: 0,
                validateForm: {
                    name: '',
                    number: '',
                    message: ''
                },
                rules: [{
                    validate: (val) => !!val,
                    message: 'Cannot be empty'
                }],
                nameRules: [{
                        validate: (val) => !!val,
                        message: 'Name cannot be empty'
                    },
                    {
                        validate: (val) => val.length >= 3,
                        message: 'The length of user name is greater than 3'
                    }
                ],
                telRules: [{
                        validate: (val) => !!val,
                        message: 'Phone number cannot be empty'
                    },
                    {
                        validate: (val) => val.length >= 3 && val.length < 12,
                        message: 'Phone number format error'
                    }
                ],
                messageRules: [{
                        validate: (val) => !!val,
                        message: 'Message cannot be empty'
                    },
                    {
                        validate: (val) => val.length >= 3,
                        message: 'The length of message is greater than 3'
                    }
                ],
            }
        },
        methods: {
            submit() {
                this.$refs.form.validate().then((result) => {
                    if (result) {
                        document.querySelector('#msgForm').submit()
                    }
                });
            },
        }
    });
</script>

</html>